<template>
  <div class="home card">
    <el-popover placement="left" width="100px" popper-class="custom-popper">
      <template #reference>
        <div class="ucenter-main-menu"><img src="./img/minmenu.png" /></div>
      </template>
      <el-anchor :container="containerRef" direction="vertical" type="default" :offset="0" :bound="50" @click="handleClick">
        <el-anchor-link v-for="item in menuList" :key="item.key" :href="`#${item.name}`" :title="`${item.name}`" />
      </el-anchor>
    </el-popover>
    <div class="ucenter-main-right" ref="containerRef" v-if="showComponent">
      <component
        v-for="item in menuList"
        :id="item.name"
        :key="item.key"
        :is="components[item.key]"
        :name="item.name"
      ></component>
    </div>
  </div>
</template>

<script setup lang="ts" name="ucenterManagement">
import { ref, defineAsyncComponent, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getThirdIdList } from "@/api/modules/netManagement/ucenter";

const route = useRoute();
const name = computed(() => route.query.name as string);
const containerRef = ref<any>(null);
const menuList = ref([
  { name: "系统概况", key: "system" },
  { name: "网络管理", key: "net" },
  { name: "资源管理", key: "resource" }
]);
const showComponent = ref(false);
const components = computed(() => {
  const data = {};
  menuList.value.forEach(item => {
    data[item.key] = defineAsyncComponent(() => import(`./${item.key}/index.vue`));
  });
  return data;
});
const sysId = ref("");

// 获取第三方系统id
const getSysId = async () => {
  showComponent.value = false;
  const params = {
    type: "ucenterH3c"
  };
  await getThirdIdList(params)
    .then(res => {
      sysId.value = res.data[0].id;
      if (sysId.value) sessionStorage.setItem("sysId", sysId.value);
      showComponent.value = true;
    })
    .catch(error => {
      console.log(error);
      showComponent.value = true;
    });
};

const handleClick = event => {
  event.preventDefault();
  // window.location.hash = `#/ucenter_management${link}`;
};

let time: any = null;
// const scrollToHash = hash => {
//   if (hash) {
//     const list = hash.split("#");
//     let key = "系统概况";
//     if (list.length === 3) {
//       key = decodeURIComponent(list[list.length - 1]);
//     }
//     time = setInterval(() => {
//       let i = 0;
//       let element: any = null;
//       menuList.value.forEach(item => {
//         const e = document.querySelector(`#${item.name}`) as HTMLElement | null;
//         if (e) {
//           i++; // 防止页面所有元素未渲染完成
//           if (item.name === key) element = e;
//         }
//       });
//       if (i === menuList.value.length && element) {
//         containerRef.value.scrollTo({
//           top: element.offsetTop - 87,
//           behavior: "smooth"
//         });
//         clearInterval(time);
//       }
//     }, 500);
//   }
// };

const scrollToHash = () => {
  let key = name.value ? decodeURIComponent(name.value) : "";
  if (!key) return;
  time = setInterval(() => {
    let i = 0;
    let element: any = null;
    menuList.value.forEach(item => {
      const e = document.querySelector(`#${item.name}`) as HTMLElement | null;
      if (e) {
        i++; // 防止页面所有元素未渲染完成
        if (item.name === key) element = e;
      }
    });
    if (i === menuList.value.length && element) {
      containerRef.value.scrollTo({
        top: element.offsetTop - 87,
        behavior: "smooth"
      });
      clearInterval(time);
    }
  }, 500);
};

onMounted(async () => {
  scrollToHash();
  await getSysId();
  // scrollToHash(window.location.hash);
});
</script>

<style scoped lang="scss">
.custom-popper {
  :deep(.el-anchor) {
    background: transparent;

    // background: var(--el-collapse-icon-color);
    border-radius: 10px;
  }
  :deep().el-anchor.el-anchor--vertical .el-anchor__list {
    padding: 16px 10px;
  }
  :deep().el-anchor__item {
    margin: 10px 0;
  }
  :deep().el-anchor .el-anchor__list .el-anchor__item a {
    padding: 4px 14px;
    color: white;
    border-radius: 8px;
    opacity: 0.8;
  }
  :deep().el-anchor__link.is-active {
    background: var(--el-color-primary);
    opacity: 1 !important;
  }
}
.home {
  // position: relative;
  display: flex;
  column-gap: 8px;
  width: 100%;
  height: 100%;
  .ucenter-main-menu {
    position: absolute;
    top: 450px;
    right: 20px;
    z-index: 100;
    width: 48px;
    height: 48px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ucenter-main-right {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 40px;
    overflow: auto;
    overflow-x: hidden;
  }
}
</style>
